<template>
  <el-descriptions
      class="margin-top"
      :column="2"
      :size="'default'"
      border
  >
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          <el-icon :style="iconStyle">
            <user/>
          </el-icon>
          标题
        </div>
      </template>
      {{ quotation.title }}
    </el-descriptions-item>

    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          <el-icon :style="iconStyle">
            <location/>
          </el-icon>
          页码
        </div>
      </template>
      {{ quotation.page }}
    </el-descriptions-item>

    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          <el-icon :style="iconStyle">
            <location/>
          </el-icon>
          出版日期
        </div>
      </template>
      {{ (quotation.date.toString()).slice(0, 10) }}
    </el-descriptions-item>

    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          <el-icon :style="iconStyle">
            <tickets/>
          </el-icon>
          作者
        </div>
      </template>
      {{ quotation.authorsName }}
    </el-descriptions-item>

    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          <el-icon :style="iconStyle">
            <iphone/>
          </el-icon>
          DOI
        </div>
      </template>
      {{ quotation.doi }}
    </el-descriptions-item>

    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          <el-icon :style="iconStyle">
            <tickets/>
          </el-icon>
          录入时间
        </div>
      </template>
      {{ new Date(quotation.createTime).toLocaleString() }}
    </el-descriptions-item>
    <el-descriptions-item>
      <template #label>
        <div class="cell-item">
          <el-icon :style="iconStyle">
            <tickets/>
          </el-icon>
          修改时间
        </div>
      </template>
      {{ new Date(quotation.modifyTime).toLocaleString() }}
    </el-descriptions-item>

  </el-descriptions>

</template>

<script setup lang="ts">
import {computed, inject, ref} from 'vue'
import {
  Iphone,
  Location,
  Tickets,
  User,
} from '@element-plus/icons-vue'

const size = ref('')
const quotation = inject('showQuotation')
const iconStyle = computed(() => {
  const marginMap = {
    large: '8px',
    default: '6px',
    small: '4px',
  }
  return {
    marginRight: marginMap[size.value] || marginMap.default,
  }
})
</script>

<style scoped>


.cell-item {
  display: flex;
  align-items: center;
}

.margin-top {
  margin-top: 0;
}
</style>
